<template>
  <div>
    <div style="background: #f3f3f6;padding:1rem 1rem;text-align: left;">
      <div style="cursor: pointer;display: flex; flex-direction: row;justify-content: space-between" @click="isDisplayBaseInfo = !isDisplayBaseInfo">
        <p style="font-weight: bold" >展厅基本信息<Icon :type="isDisplayBaseInfo?'ios-arrow-down':'ios-arrow-up'" style="color: #757575;margin-left: 0.3rem;margin-bottom: 0.5rem"/></p>
        <div>
          <template v-if="isAppPlatform(baseInfo.platform)">
            <Button type="success" size="small" icon="ios-paper-plane" style="margin-right: 0.3rem" @click.stop="publishStands()" v-if="isUnPublished">发布</Button>
          </template>
          <template v-else>
            <Button type="info" size="small" icon="md-search" style="margin-right: 0.3rem" @click.stop="previewStands()" >预览</Button>
            <Button type="success" size="small" icon="ios-paper-plane" style="margin-right: 0.3rem" @click.stop="publishPage()" v-if="isPreviewed">发布</Button>
          </template>
          <Button type="warning" size="small" icon="md-arrow-down"  style="margin-right: 0.3rem" @click.stop="offlineStands()" v-if="isPublished">下线</Button>
        </div>
      </div>
      <div>
        <div>
          <KeyValueView title="名称" :value="baseInfo.name"></KeyValueView>
          <KeyValueView title="展厅类型" :value="getStandsType"></KeyValueView>
          <KeyValueView title="固定网址" :value="getStandsShortLink">
            <a :href="getStandsShortLink" target="_blank">{{getStandsShortLink}}</a>
          </KeyValueView>
          <KeyValueView title="SEO元数据">{{baseInfo.pageMetaInfos.length>0?'已设置':'无'}}</KeyValueView>
          <template v-if="baseInfo.tags!=null && baseInfo.tags.length>0">
            <KeyValueView title="标签">
              <Tag v-for="(item, index) in baseInfo.tags" :key="index" color="purple">{{item}}</Tag>
            </KeyValueView>
          </template>
        </div>
        <div v-show="isDisplayBaseInfo">
          <KeyValueView title="内部备注" :value="baseInfo.note" oneline></KeyValueView>
          <KeyValueView title="展厅状态" :value="getStandsState"></KeyValueView>
          <KeyValueView title="创建时间" :value="$tiyBJTime(baseInfo.createtime)"></KeyValueView>
          <KeyValueView title="最后更新" :value="$tiyBJTime(baseInfo.lastModifyTime)"></KeyValueView>
          <KeyValueView title="最后发布" :value="$tiyBJTime(baseInfo.lastPublishTime)"></KeyValueView>
          <KeyValueView title="启用SEO" :value="baseInfo.disableSeo?'已禁用':'已启用'"></KeyValueView>
        </div>
      </div>

      <div v-show="isDisplayBaseInfo">
        <p style="font-weight: bold;margin: 0.5rem 0">展厅SEO元数据</p>
        <div v-for="(item, index) in baseInfo.pageMetaInfos" :key="index" style="margin: 5px 0 5px 0;">
          <KeyValueView :title="getSEOShowName(item.name)+' - '+getPageMetaTerminal(item.terminal)+' '" :value="item.value" oneline></KeyValueView>
        </div>
      </div>

      <div style="background: #f3f3f6; cursor: pointer; text-align: right;">
        <Button size="small" type="info" ghost @click="showModifyModal()" style="margin-right: 0.5rem">编辑基本信息</Button>
        <Button size="small" ghost type="info" @click="showModifySEOModal()" :disabled="baseInfo.disableSeo">编辑SEO元数据</Button>
      </div>
    </div>

    <Card title="Html页面" icon="logo-html5" style="margin-top: 20px; height: 500px;" dis-hover>
      <span slot="extra" v-if="standsStatus.htmlEditor.isShow">
        <Button type="info" icon="md-search" size="small" @click="previewHtmlPage()">预览</Button>
        <Button type="success" icon="md-checkmark" size="small" @click="saveHtmlPage()">保存</Button>
        <Button icon="md-close" size="small" @click="hideHtmlPageEditor()">取消</Button>
      </span>
      <span slot="extra" v-else>
        <Button type="primary" icon="md-create" size="small" @click="showHtmlPageEditor()">内容编辑</Button>
      </span>
      <div style="width: 100%; height: 100%;" v-show="standsStatus.htmlEditor.isShow">
        <div style="margin-bottom: 5px;">
          <i-switch v-model="htmlPageParam.isCodeEdit" :disabled="!isEmpty(htmlPageParam.content)" size="small" false-color="#ff9900"></i-switch>
          <span style="margin-left: 5px;">{{htmlPageParam.isCodeEdit?"html代码片段":"富文本"}}</span>
        </div>
        <rich-text v-model="htmlPageParam.content" :is-code-edit="htmlPageParam.isCodeEdit" :image-handler="selectImage"></rich-text>
      </div>
      <div style="width: 100%; height: 100%;" v-show="!standsStatus.htmlEditor.isShow">
        <div style="text-align: center; color: #ccc;" v-if="isEmpty(htmlPage.content)">暂无内容</div>
        <div v-html="htmlPage.content" v-else></div>
      </div>
    </Card>

    <Modal v-model="standsStatus.modalModifyHtml.isShow" title="编辑展厅基本信息" :width="700"
           :mask-closable="false">
      <html-stand-form ref="AStandModifyHtml" :stands-model="standsModel" :tag-list="standsTagList"></html-stand-form>
      <div slot="footer">
        <Button @click="hideModifyStandsModal()">取消</Button>
        <Button type="primary" @click="modifyStands()">保存</Button>
      </div>
    </Modal>

    <Modal v-model="standsStatus.modalModifyHtmlSEO.isShow" title="编辑SEO元数据" :width="700" :mask-closable="false">
      <page-meta-form ref="pageMetaModify" :page-meta-info-list="baseInfo.pageMetaInfos" :target="baseInfo.id" :page-meta-info-type="pageMetaInfoType"></page-meta-form>
      <div slot="footer">
        <Button @click="hideModifySEOModal()">取消</Button>
        <Button type="primary" @click="saveStandsSEO()">保存</Button>
      </div>
    </Modal>

    <!-- 选择图片弹窗 -->
    <Modal v-model="imageSelectModal.isShow" title="单击选择图片" footer-hide
           :styles="{top: '20px',bottom:'20px',}" width="70%" height="1000">
      <image-select :hideleft="true" @cancelClicked="hideImageSelectModal()" @sureClicked="selectedImage"></image-select>
    </Modal>

    <!-- 预览 -->
    <Modal v-model="previewHtmlModal.isShow" title="预览" width="98%">
      <div v-html="htmlPageParam.content"></div>
    </Modal>
  </div>
</template>

<script>
import KeyValueView from "../widgets/KeyValueView";
import PageMetaForm from "./PageMetaForm/PageMetaForm";
import HtmlStandForm from "./HtmlStandForm";

import commonData from "./js/stand/common_data";
import {isEmpty} from "../js/commonUtils";
import tiyData from "./js/stand/edit_data";
import {
  afterModifyHtmlStandsBaseInfo, beforeOfflineStands, beforePreviewStands, beforePublishPage,
  beforePublishStands,
  initHtmlStandsInfo, modifyHtmlStands, saveHtmlPage,
  saveStandsSEO,
  showModifyHtmlSEOModal, showModifyHtmlStandsModal,
} from "./js/stand/edit_funs";

import pageMetaData from "./PageMetaForm/js/pageMetaData";
import {imageInit, webImageList} from "../image/js/select/image_funs";
import imageData from "../image/js/select/image_data";
import ImageSelect from "../image/ImageSelect";
import RichText from "../widgets/quill/RichText";

export default {
  name: "HtmlStandModify",
  props: {
    standsId: {type: String, required: true},
    modifyTime: {type: Number, required: true},
  },
  components: {
    RichText,
    ImageSelect,
    KeyValueView, PageMetaForm, HtmlStandForm,
  },
  data() {
    return {
      yunPath: this.$store.getters.imgPrefix,
      baseInfo: tiyData.tData.htmlBaseInfo,
      standsModel: tiyData.tParam.editParam.htmlStands,
      standsTagList: commonData.standsDic.tags,
      htmlPage: tiyData.tData.htmlPage,
      htmlPageParam: tiyData.tParam.htmlPageParam,
      standsStatus: tiyData.tStatus.stands,
      pageMetaInfoType: pageMetaData.pageMetaDic.showroomType,
      isDisplayBaseInfo: false,
      editorOption:{
        placeholder: '请编辑页面内容',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ["Resize","DisplaySize","Toolbar"]
          },
          toolbar:{
            container: [
              [{'font': [] }],//字体
              [{'header': [1, 2, 3, 4, 5, false]},{'size': ['small', false, 'large', 'huge'] }],//几级标题
              ['bold', 'italic', 'underline', 'strike'],//加粗，斜体，下划线，删除线
              ['blockquote','link'],//引用，代码块
              [{'list': 'ordered'}, {'list': 'bullet' }],//列表
              [{'color': [] }, {'background': [] }],// 字体颜色，字体背景颜色
              [{'align': [] }],//对齐方式
              ['image','video'],//上传图片、上传视频,
              ['clean'],//清除字体样式
            ],
            handlers: {
              image: this.editorImageHandler,
              size: this.setFontSize
            }
          },
          htmlEditButton:{}
        }
      },
      imageSelectModal: {
        isShow: false,
        editorContainer: null,
        editorRef: "",
      },
      previewHtmlModal: {
        isShow: false,
      }
    }
  },
  computed: {
    isUnPublished() {
      return this.baseInfo.state == commonData.standsDic.unPublishedState;
    },
    isPreviewed() {
      return this.baseInfo.publishState == commonData.standsDic.previewedPublishState;
    },
    isPublished() {
      return this.baseInfo.state == commonData.standsDic.publishedState;
    },
    isModified() {
      return this.baseInfo.publishState == commonData.standsDic.modifiedPublishState;
    },
    getStandsType() {
      let element = commonData.standsDic.types.find(element => element.value == this.baseInfo.type);
      return element==null?"":element.label;
    },
    getStandsShortLink() {
      if(isEmpty(this.baseInfo.shortLink)) {
        return "";
      }else{
        return this.$store.getters.webDomain + this.baseInfo.shortLink;
      }
    },
    getStandsTags() {
      if(this.baseInfo.tags==null || this.baseInfo.tags=="") {
        return "";
      }
      return this.$toJson(this.baseInfo.tags).join(",");
    },
    getStandsState() {
      let element = commonData.standsDic.states.find(element => element.value == this.baseInfo.state);
      return element==null?"":element.label;
    }
  },
  methods: {
    editorImageHandler(arg1) {
      this.selectImage();
    },
    isEmpty(val) {
      return isEmpty(val);
    },
    isAppPlatform(platform) {
      return commonData.standsDic.appPlatform == platform;
    },
    isPcPlatform(platform) {
      return commonData.standsDic.pcPlatform == platform;
    },
    isUnionPlatform(platform) {
      return commonData.standsDic.unionPlatform == platform;
    },
    publishStands() {
      beforePublishStands(this, this.standsId, afterModifyHtmlStandsBaseInfo);
    },
    previewStands() {
      beforePreviewStands(this, this.baseInfo.type, afterModifyHtmlStandsBaseInfo);
    },
    publishPage() {
      beforePublishPage(this, afterModifyHtmlStandsBaseInfo);
    },
    offlineStands() {
      beforeOfflineStands(this, this.standsId, afterModifyHtmlStandsBaseInfo);
    },
    initPageInfo() {
      this.isDisplayBaseInfo = false;
      this.standsStatus.htmlEditor.isShow = false;
    },
    formatDate(date) {
      return date==null?"":this.$tiyBJTime(date);
    },
    getSEOShowName(name) {
      let element = pageMetaData.pageMetaDic.names.find(element => element.value == name);
      return element==null?"":element.label;
    },
    getPageMetaTerminal(terminal) {
      let element = pageMetaData.pageMetaDic.terminals.find(element => element.value == terminal);
      return element==null?"":element.label;
    },
    showModifyModal() {
      showModifyHtmlStandsModal(this, this.baseInfo);
    },
    hideModifyStandsModal() {
      this.standsStatus.modalModifyHtml.isShow = false;
    },
    modifyStands() {
      modifyHtmlStands(this, afterModifyHtmlStandsBaseInfo);
    },
    showModifySEOModal() {
      showModifyHtmlSEOModal(this, this.baseInfo);
    },
    hideModifySEOModal() {
      tiyData.tStatus.stands.modalModifyHtmlSEO.isShow = false;
    },
    saveStandsSEO() {
      saveStandsSEO(this, tiyData.tData.htmlBaseInfo.type);
    },
    showHtmlPageEditor() {
      this.htmlPageParam.showroomId = this.baseInfo.id;
      this.htmlPageParam.id = this.htmlPage.id;
      this.htmlPageParam.content = this.htmlPage.content;
      this.htmlPageParam.isCodeEdit = this.htmlPage.isCodeEdit;
      this.standsStatus.htmlEditor.isShow = true;
    },
    hideHtmlPageEditor() {
      this.standsStatus.htmlEditor.isShow = false;
    },
    previewHtmlPage() {
      this.previewHtmlModal.isShow = true;
    },
    saveHtmlPage() {
      saveHtmlPage(this);
    },
    selectImage(_this, editor) {
      this.imageSelectModal.isShow = true;
      this.imageSelectModal.editorContainer = _this;
      this.imageSelectModal.editorRef = editor;
      imageInit(this, imageData, false, true, commonData.standsDic.folderType);
      imageData.tParams.folderType = commonData.standsDic.folderType;
      imageData.tParams.folderList.folderName = this.standsId;
      webImageList(this, imageData);
    },
    hideImageSelectModal() {
      this.imageSelectModal.isShow=false
    },
    selectedImage(selectedImages) {
      this.imageSelectModal.isShow = false;
      if(selectedImages.length > 0) {
        let img = selectedImages[0].yunKey;
        this.insertImage(img);
      }
    },
    insertImage(yunKey) {
      let editor = this.imageSelectModal.editorContainer.$refs[this.imageSelectModal.editorRef];
      let selection = editor.quill.getSelection();
      let url = this.yunPath + yunKey;
      editor.quill.insertEmbed(selection==null?0:selection.index, 'image', url);
    },
    setFontSize(value) {
      // console.log(value);
      let fontSize = false;
      switch (value) {
        case "small":
          fontSize = 10;
          break;
        case "large":
          fontSize = 18;
          break;
        case "huge":
          fontSize = 32;
          break;
        default:
          fontSize = false;
      }
      // console.log("fontSize--------"+fontSize);
      let selection = this.$refs.htmlEditor.quill.getSelection();
      this.$refs.htmlEditor.quill.formatText(selection.index, selection.length, "size", fontSize?fontSize+"px":fontSize);
    },
  },
  watch: {
    modifyTime() {
      this.initPageInfo();
      initHtmlStandsInfo(this, this.standsId);
    },
  },
  mounted() {
    // this.$refs.htmlEditor.quill.getModule("toolbar").addHandler("image", this.editorImageHandler);
  }
}
</script>

<style scoped lang="less">
@import "~quill/dist/quill.core.css";
@import "~quill/dist/quill.snow.css";
@import "~quill/dist/quill.bubble.css";
.quill-editor {
  overflow-y: visible;
  white-space: normal!important;
  height: 360px;
  img{
    width: 100%;
  }
}
</style>
